<template>
  <div class="stat-card">
    <div class="card-title">{{ title }}</div>
    <div class="card-value">{{ value }}</div>
    <div class="card-change" :class="change.direction">
      <i
        :class="
          change.direction === 'up'
            ? 'iconfont icon-arr-up red'
            : 'iconfont icon-arr-down green'
        "
      ></i>
      {{ change.value }}%
    </div>
    <div ref="chartContainer" class="mini-chart"></div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import ApexCharts from "apexcharts";

const props = defineProps({
  title: String,
  value: [String, Number],
  type: {
    type: String,
    default: "line", // 支持 'line' 或 'bar'
    validator: (value) => ["line", "bar"].includes(value),
  },
  change: {
    type: Object,
    default: () => ({ value: 0, direction: "up" }),
  },
  color: {
    type: String,
    default: "#4f46e5",
  },
  data: {
    type: Array,
    default: () => [30, 40, 35, 50, 49, 60, 70, 91, 125],
  },
});

const chartContainer = ref(null);
let chartInstance = null;

// 生成填充样式
const generateFill = (color) => {
  if (props.type === "line") {
    // 折线图: 从上到下渐变 (0.5 -> 0)
    return {
      type: "gradient",
      gradient: {
        type: "vertical",
        shadeIntensity: 0,
        opacityFrom: 0.5,
        opacityTo: 0,
        stops: [0, 100],
        gradientToColors: [color],
      },
    };
  } else {
    // 柱状图: 使用纯色填充
    return {
      type: "solid",
      color: color,
    };
  }
};

// 创建图表配置
const createChartOptions = () => {
  const isLineChart = props.type === "line";
  
  return {
    chart: {
      type: isLineChart ? 'area' : 'bar',
      sparkline: {
        enabled: true
      },
      animations: {
        enabled: true,
        easing: 'easeinout',
        speed: 800,
        animateGradually: {
          enabled: true,
          delay: 150
        },
        dynamicAnimation: {
          enabled: true,
          speed: 350
        }
      }
    },
    series: [{
      name: 'Trend',
      data: props.data
    }],
    stroke: {
      curve: isLineChart ? 'smooth' : undefined,
      width: isLineChart ? 2 : 0,
      colors: [props.color]
    },
    fill: generateFill(props.color),
    colors: [props.color], // 所有柱子使用传入的颜色
    plotOptions: {
      bar: {
        borderRadius:1, // 圆角设为2px
        distributed: false, // 确保所有柱子使用相同颜色
        columnWidth: '70%',
      }
    },
    tooltip: {
      enabled: false
    },
    xaxis: {
      labels: {
        show: false
      },
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      },
      tooltip: {
        enabled: false
      }
    },
    yaxis: {
      show: false
    },
    grid: {
      show: false,
      padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      }
    },
    markers: {
      size: 0
    },
    dataLabels: {
      enabled: false
    }
  };
};

// 初始化迷你图表
const initMiniChart = () => {
  if (!chartContainer.value) return;
  
  if (chartInstance) {
    chartInstance.destroy();
    chartInstance = null;
  }
  
  chartInstance = new ApexCharts(chartContainer.value, createChartOptions());
  chartInstance.render();
};

// 监听数据变化
watch(() => props.data, (newData) => {
  if (chartInstance) {
    chartInstance.updateSeries([{ data: newData }]);
  }
}, { deep: true });

// 监听图表类型和颜色变化
watch(() => [props.type, props.color], () => {
  if (chartInstance) {
    chartInstance.destroy();
    initMiniChart();
  }
}, { deep: true });

onMounted(initMiniChart);
onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.destroy();
  }
});
</script>

<style scoped lang="less">
.stat-card {
  border-radius: var(--v-card-radius);
  box-shadow: var(--v-shadow);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  background-color: var(--v-card-bg);
  border: 1px solid var(--v-border-color);
  color: var(--v-text);
  height: 100%;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.card-title {
  font-size: 15px;
  color: var(--v-text);
  margin-bottom: 10px;
}

.card-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--v-text-darker);
  margin-bottom: 15px;
}

.card-change {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  .green {
    color: var(--v-success);
  }
  .red {
    color: var(--v-danger);
  }
}

.mini-chart {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 120px;
  height: 50px;
  z-index: 1;
}
</style>